<template>
   <el-row
      type="flex"
      justify="space-between"
      align="middle"
      style="height: 40px;width: 100%"
   >
      <!-- row 行 一行24份-->
      <!-- col 列 -->
      <!-- 左侧内容 -->
      <!-- 这列默认补全 20份 -->
      <el-col>
         <span>{{ treeNode.name }}</span>
      </el-col>
      <!-- 右侧内容 -->
      <el-col :span="4">
         <el-row type="flex" justify="end">
            <el-col>{{ treeNode.manager }}</el-col>
            <el-col>
               <!-- 放置下拉菜单 -->
               <el-dropdown @command="operateDepts">
                  <!-- 内容 -->
                  <span>
                     操作
                     <i class="el-icon-arrow-down"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                     <!-- 下拉选项 -->
                     <el-dropdown-item
                        command="add"
                        :disabled="!checkPermission('add-dept')"
                     >
                        添加子部门
                     </el-dropdown-item>
                     <!-- 只有不是根节点时再显示 -->
                     <el-dropdown-item v-if="!isRoot" command="edit">
                        编辑部门
                     </el-dropdown-item>
                     <el-dropdown-item v-if="!isRoot" command="del">
                        删除部门
                     </el-dropdown-item>
                  </el-dropdown-menu>
               </el-dropdown>
            </el-col>
         </el-row>
      </el-col>
   </el-row>
</template>

<script>
import { delDepartment } from '@/api/departments'
export default {
   props: {
      // 定义一个传入的属性
      treeNode: {
         required: true,
         type: Object
      },
      isRoot: {
         type: Boolean,
         // 默认false
         default: false
      }
   },
   methods: {
      // 点击编辑 删除 新增时触发
      // 把对应的属性传入进来
      operateDepts(type) {
         if (type === 'add') {
            // 添加子部门
            // 在当前点击的部门下，添加子部门 => this.treeNode 就是当前点击的部门
            this.$emit('addDepts', this.treeNode)
         } else if (type === 'edit') {
            // 编辑部门
            // 点击谁编辑谁
            this.$emit('editDepts', this.treeNode)
         } else {
            // 删除部门
            // confirm 是组件的一个弹框
            this.$confirm('你确定要删除该组织部门吗？')
               .then(() => {
                  // 将这个 promiese 对象 返回
                  return delDepartment(this.treeNode.id)
               })
               .then(() => {
                  // 等到成功的时候，调用接口删除了，后端变了，前段（页面）没变
                  // 应该让父组件重新获取
                  // 触发自定义事件
                  this.$emit('delDepts')
                  this.$message.success('删除部门成功')
               })
            // this.$confirm(
            //    '你确定要删除该组织部门吗？'
            // ).then(async() => {
            //    // 将这个 promiese 对象 返回
            //    await delDepartment(this.treeNode.id)
            //    this.$emit('delDepts')
            //    this.$message.success('删除部门成功')
            // })
         }
      }
   }
}
</script>

<style lang="sass" scoped></style>
